<template>
  <div class="teacherList">
    <el-card>
      <!-- 顶部新建 -->
      <!-- <div class="opt_wrap">
        <el-button
          type="text"
          @click="goToURL('teacherInfo', { pageType: 'create' })"
        >
          <i class="iconfont icon-add"></i>
          新建
        </el-button>
      </div> -->
      <!-- <div class="opt_wrap">
        <div class="opt_wrap_left">
          <p>
            已选中<span style="color: #1796EB">{{ selectedNum }}</span
            >项
          </p>
          <p
            v-if="showBtn && selectedNum === 1 && selectionCustomer"
            @click="
              goToURL('teacherInfo', {
                pageType: 'edit',
                id: selectionCustomer[0].id
              })
            "
          >
            <i class="iconfont icon-fenpai"></i>
            编辑
          </p>
          <p v-if="showBtn" @click="showDelModal = true">
            <i class="iconfont icon-shanchu1"></i>
            删除
          </p>

        </div>
        <div class="opt_wrap_right">
          <p
            class="add"
            @click="goToURL('teacherInfo', { pageType: 'create' })"
          >
            <i
              class="iconfont icon-xinjian1"
              style="color: white; font-size: 12px; margin-right: 4px;"
            ></i>
            新建
          </p>
        </div>
      </div> -->

      <!-- tag标签 -->
      <statisticsTag
        v-if="statisticsTagData"
        :data="statisticsTagData"
        @searchStatus="searchStatus"
        style="margin-top: 30px;"
      />

      <!-- 搜索框 -->
      <div class="search_wrap">
        <el-input
          placeholder="教师ID/姓名/邮箱/手机号"
          v-model="searchCondition"
          style="width: 260px;"
          @keyup.enter.native="queryListData"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <el-select
          v-model="role_id"
          filterable
          clearable
          @change="queryListData"
          placeholder="请选择职位"
        >
          <el-option
            v-for="item in roleData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select> -->
        <el-select
          v-model="teacher_type"
          filterable
          clearable
          @change="queryListData"
          placeholder="请选择教师类型"
        >
          <el-option
            v-for="item in teacherType"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </div>

      <!-- tab表格 -->
      <div class="table_list">
        <el-table
          center
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" align="center" width="40" /> -->

          <el-table-column align="center" label="教师ID">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="用户名">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="教师名称">
            <template slot-scope="scope">
              <p
                class="see_detail"
                @click="
                  goToURL('teacherInfo', {
                    pageType: 'details',
                    id: scope.row.id
                  })
                "
              >
                {{ scope.row.name }}
              </p>
            </template>
          </el-table-column>

          <el-table-column align="center" label="职位">
            <template slot-scope="scope">
              <span>{{ scope.row.role_arr }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="教师类型">
            <template slot-scope="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="班级数量">
            <template slot-scope="scope">
              <span>{{ scope.row.class_count }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="学生数量">
            <template slot-scope="scope">
              <span>{{ scope.row.user_count }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="联系电话">
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="创建日期" width="160">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="80">
            <template slot-scope="scope">
              <!-- <el-row type="flex" align="center"> -->
              <!-- <el-col :span="8">
                  <el-button
                    type="text"
                    size="small"
                    @click="
                      goToURL('teacherInfo', {
                        pageType: 'edit',
                        id: scope.row.id
                      })
                    "
                    >编辑</el-button
                  >
                </el-col>
                <el-col :span="8">
                  <el-button
                    type="text"
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    :disabled="scope.row.role_id == 1"
                    >删除</el-button
                  >
                </el-col> -->
              <!-- <el-col :span="24"> -->
              <el-button
                type="text"
                size="small"
                @click="
                  goToURL('classRoomManage', { teacher_id: scope.row.id })
                "
                >查看班级</el-button
              >
              <!-- </el-col> -->
              <!-- </el-row> -->
            </template>
          </el-table-column>
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>

    <!-- 对话框 -->
    <div>
      <el-dialog
        title="提示"
        width="510px"
        :visible.sync="showDelModal"
        class="del_modal"
      >
        <div class="content">
          <p><i class="iconfont icon-tishi"></i></p>
          <p v-if="selectionCustomer.length === 1">
            是否将老师<span>{{ selectionCustomer[0].name }}删除？</span>
          </p>
          <p v-if="selectionCustomer.length > 1">
            是否将<span
              >{{ selectionCustomer[0].name }}、{{ selectionCustomer[1].name
              }}<span v-if="selectionCustomer.length > 2">等</span>、{{
                selectionCustomer.length
              }}位老师删除？</span
            >
          </p>
          <p>删除成功之后，该操作将无法恢复</p>
        </div>
        <div class="btn">
          <el-button @click="showDelModal = false">返回</el-button>
          <el-button type="primary" @click="confirmDelete">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import statisticsTag from "@/components/statisticsTag";
import { paginationMixin } from "@/mixin";
import http from "@/api/teacher";
import httpApi from "@/api/global";
export default {
  name: "teacherList",
  mixins: [paginationMixin],
  data() {
    return {
      selectedNum: 0,
      showBtn: false,
      showDelModal: false,
      selectionCustomer: [],
      statisticsTagData: [
        {
          label: "全部教师",
          total: 0,
          status: null,
          icon: "icon-jiaoshiguanli",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB"
        },
        {
          label: "中教",
          total: 0,
          status: "中教",
          icon: "icon-huabanfuben",
          backgroundStart: "#02c779",
          backgroundEnd: "#02c765"
        },
        {
          label: "助教",
          total: 0,
          status: "助教",
          icon: "icon-jiaoshizhongxin",
          backgroundStart: "#F27450",
          backgroundEnd: "#F25751"
        },
        {
          label: "外教",
          total: 0,
          status: "外教",
          icon: "icon-jiaoshizhongxin",
          backgroundStart: "#a946eb",
          backgroundEnd: "#9346eb"
        },
        {
          label: "外聘",
          total: 0,
          status: "外聘",
          icon: "icon-huabanfuben",
          backgroundStart: "#02c779",
          backgroundEnd: "#02c765"
        }
      ],
      searchCondition: null,
      loading: false,
      tableListData: [],
      role_id: null,
      teacher_type: null,
      roleData: [],
      teacherType: []
    };
  },
  components: {
    statisticsTag
  },
  methods: {
    // 删除对话框确认
    confirmDelete() {
      let id = this.delNiche;
      http.deleteContent({ id }).then(res => {
        this.$message.success(res.msg || "删除成功");
        this.showDelModal = false;
        this.getListData();
      });
    },
    handleDelete(id) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          http
            .deleteContent({ id })
            .then(res => {
              this.$message.success("删除成功");
              this.getListData();
            })
            .catch(err => {
              this.$message.error("删除失败,当前教师有关联班级");
            });
        })
        .catch(() => {
          this.$message.info("删除操作已取消");
        });
    },
    // tag标签绑定的搜索事件
    searchStatus(status) {
      this.teacher_type = status;
      this.getListData();
    },
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    queryListData() {
      this.getListData();
    },
    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      type = this.teacher_type,
      role_id = 2
    ) {
      this.loading = true;
      http.getList({ page, list_rows, search, type, role_id }).then(res => {
        /* this.statisticsTagData.map(item => {
          if (item.label === "全部教师") {
            item.total = res.count;
          }
          if (item.label === "教学老师") {
            item.total = res.count - 1;
          }
        }); */
        this.loading = false;
        this.total = res.data.total;
        let tableListData = res.data.data;
        tableListData.map(item => {
          item.role_arr = item.role_arr.name;
        });
        console.log("tableListData", res.data);
        this.tableListData = tableListData;
      });
    },
    getRole() {
      http.getRole().then(res => {
        this.roleData = res.data;
      });
    },

    getTeacherType() {
      let params = { varname: "teacher_type", role_id: 2 };
      httpApi.getTeacherType(params).then(res => {
        this.teacherType = res.data;
        console.log(" this.teacherType ", this.teacherType);
        let counts = 0;
        this.statisticsTagData.map(item => {
          this.teacherType.map(items => {
            if (item.label === items.name) {
              item.total = items.count;
              counts += items.count;
            }
          });
        });
        this.statisticsTagData.map(item => {
          if (item.label === "全部教师") {
            item.total = counts;
          }
        });
      });
    },
    // tab表单第一列选中事件
    handleSelectionStudent(val) {
      this.selectionCustomer = val;
      console.log(val);
      this.selectedNum = this.selectionCustomer.length;
      if (this.selectedNum === 0) {
        this.showBtn = false;
      } else {
        this.showBtn = true;
      }
      if (this.selectionCustomer.length !== 0) {
        this.delNiche = [];
        for (let item of this.selectionCustomer) {
          this.delNiche.push(item.id);
          // this.delNiche.push({ user_id: item.id});
        }
      }
    }

    // 权限管理参数：role_id
    // getPageParams() {
    //   if (Object.keys(this.$route.params).length) {
    //     sessionStorage.setItem(
    //       "teacherListParams",
    //       JSON.stringify(this.$route.params)
    //     );
    //   }

    //   let pageParams = sessionStorage.getItem("teacherListParams");
    //   if (pageParams) {
    //     pageParams = JSON.parse(pageParams);

    //     if (pageParams.role_id) {
    //       this.role_id = pageParams.role_id;
    //     }
    //   }
    //   this.getListData();
    // }
  },
  created() {
    this.getRole();
    this.getTeacherType();
    this.getListData();
    // this.getPageParams();
  }
};
</script>

<style lang="scss" scoped>
.teacherList {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .opt_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    &_left {
      display: flex;
      p {
        margin-right: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
        &:nth-of-type(1) {
          cursor: default;
          color: #646464;
          &:hover {
            color: #646464;
          }
        }
      }
    }
    &_right {
      display: flex;
      align-items: center;
      p {
        margin-left: 18px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
      .add {
        width: 72px;
        height: 30px;
        background: linear-gradient(top left, #17b5eb, #1796eb);
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        &:hover {
          color: white;
        }
      }
    }
  }
  .search_wrap {
    padding: 20px 30px;
  }
  .table_list {
    padding: 0px 10px;
    .see_detail {
      cursor: pointer;
      color: #1796eb;
    }
  }
  .flag {
    padding: 3px 12px;
    background: #c6c7c9;
    color: #eee;
    border-radius: 60px;
    line-height: 22px;
    margin: 0px 5px 5px 0px;
  }
  .del_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
}
</style>
